<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="bck/static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/webuploader/webuploader.css">
    <script type="text/javascript" src="/static/webuploader/webuploader.js"></script>
</head>
<body>
    <div id="uploader" class="wu-example" style="width: 500px;height: 500px;background: darkblue;margin: auto">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>
    <div id="img"></div>

    <script type="text/javascript">
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '/static/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '/webuploader.php',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',//指名那个内容是上传按钮

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,

            // 选完文件后，是否自动上传。
            //auto:true,

            //指定接受哪些类型的文件。
            /*accept :{
                    title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/!*'
                },*/

            //上传文件总数量, 超出则不允许加入队列。
            //fileNumLimit:2,

            //文件总大小是否超出限制, 超出则不允许加入队列。
            //fileSizeLimit: 1024*1024*1,

            //指定Drag And Drop拖拽的容器，如果不指定，则不启动。(参数id)
            dnd:'#uploader',

            //是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。
            disableGlobalDnd:true,

            //是否要分片处理大文件上传。
            chunked:true,

            //如果要分片，分多大一片？默认大小为5M.
            //chunkSize:

            //上传并发数。允许同时最大上传进程数
            //threads:3
        });
        //文件上传成功触发uploadSuccess事件，http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader
        uploader.on( 'uploadSuccess', function( file,msg ) {
            console.log('----上传成功-----');
            //console.log(file);
            //console.log(msg._raw);
            console.log(msg);
            $.ajax({
                url:"/webuploader.php",
                type:'post',
                data:{
                    act:1,
                    name:file.name
                },
                success:function (msg) {
                    console.log(msg);
                }
            })
        });


        //上传过程中触发，携带上传进度。
        uploader.on( 'uploadProgress', function( file,percentage ) {
            //console.log('----上传过程-----');
            //console.log('上传进度：',percentage);
        });
        $("#ctlBtn").click(function () {
            uploader.upload();//上传函数
        });
        //beforeFileQueued当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。
        uploader.on( 'beforeFileQueued', function(file) {
            //console.log('----文件被加入队列之前-----');
            //console.log(file);
        });

        /*uploader.on( 'error', function( type ) {
            console.log(type);
        });*/
        //	当文件被加入队列以后触发。
        /*uploader.on( 'fileQueued', function( file ) {

            //第一个为error，如果生成缩略图有错误，此error将为真。
            //第二个为ret, 缩略图的Data URL值。
            uploader.makeThumb( file, function( error, ret ) {
                if ( error ) {
                    console.log('不是图片');
                } else {
                    $("#img").append('<img src="'+ret+'"/>');
                }
            });
        });*/
    </script>
</body>
</html>